<template>
  <div id="app">
<!-- 更多 -->
    <div class="more" @click="showPopup()">
        <p></p>
        <p></p>
        <p></p>
    </div>

<!-- 侧边栏 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%' ,width:'80%'}">
      <!-- 头像 -->
      <div class="navtop">
        <div class="navtop-left">
          <van-image
          round
          width="2rem"
          height="2rem"
          :src='imgurl'
        />
        </div>
        <div class="navtop-right">
          <div class="navtopm">
          <van-cell-group>
          <van-cell :title='nickname' is-link />
        </van-cell-group>
        <!-- <img :src='imgurl' alt=""> -->
        </div>
        </div>
        
      </div>
      <div class="more-a">
            <div class="moreone">
                <van-cell-group>
                    <van-cell icon="comment-circle-o" title="我的消息" is-link to="/news" @click="close()"/>
                    <van-cell icon="medal-o" title="云贝中心"  is-link to="/conch" @click="close()"/>
                    <van-cell icon="fire-o" title="创作者中心"  is-link/>
                </van-cell-group>
            </div>
            <div class="moretwo">
                <van-cell-group>
                    <p>音乐服务</p>
                    <van-cell icon="location-o" title="云村有票" is-link/>
                    <van-cell icon="cart-o" title="商城"  is-link/>
                    <van-cell icon="flower-o" title="游戏专区"  is-link/>
                    <van-cell icon="music-o" title="口袋彩铃"  is-link/>
                </van-cell-group>
            </div>
            <div class="moretwo">
                <p>其他</p>
                <van-cell-group>
                    <van-cell icon="setting-o" title="设置" is-link @click="goset()"/>
                    <van-cell icon="bulb-o" title="夜间模式"  is-link/>
                    <van-cell icon="underway-o" title="定时关闭"  is-link/>
                    <van-cell icon="shop-collect-o" title="个性装扮"  is-link to="/dress" @click="close"/>
                    <van-cell icon="star-o" title="边听边存"  value="未开启" is-link/>
                    <van-cell icon="star-o" title="在线听歌免流量"  is-link/>
                    <van-cell icon="star-o" title="音乐黑名单"  is-link/>
                    <van-cell icon="star-o" title="青少年模式"  is-link/>
                    <van-cell icon="star-o" title="音乐闹钟"  is-link/>
                </van-cell-group>
            </div>
            <div class="moretwo">
                <van-cell-group>
                    <van-cell icon="setting-o" title="我的订单" is-link to="/order" @click="close"/>
                    <van-cell icon="bulb-o" title="优惠券"  is-link/>
                    <van-cell icon="underway-o" title="我的客服"  is-link/>
                    <van-cell icon="shop-collect-o" title="分享网易云音乐"  is-link/>
                    <van-cell icon="star-o" title="关于" is-link/>
                </van-cell-group>
                <div class="jbbutton" @click="tiaoinstall()">
                     <van-button type="primary" block >退出登录/关闭</van-button>
                </div>
            </div>
        </div>
    </van-popup>
    <router-view></router-view>
    <van-tabbar route active-color="red" inactive-color="#444">
      <van-tabbar-item :to="{ name: 'Home' }" icon="home-o"
        >首页</van-tabbar-item
      >
      <van-tabbar-item :to="{ name: 'Blog' }" icon="search"
        >播客</van-tabbar-item
      >
      <van-tabbar-item :to="{ name: 'Mine' }" icon="friends-o"
        >我的</van-tabbar-item
      >
      <van-tabbar-item :to="{ name: 'Follow' }" icon="setting-o"
        >关注</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import Vue from 'vue';
Vue.use(VanImage);
import axios from 'axios';
export default {
  data() {
    return {
      imgurl:'',
      nickname:'',
      active: 0,
      show:false
    };
  },
  methods:{
    close(){
      this.show=false;
    },
    goset(){
      this.show=false;
      this.$router.push('/set');
    },
    tiaoinstall(){
      this.show=false;
      this.$router.push('/install');
    },
    showPopup() {
            this.show = true;
        },
    getuserinfo(){
      axios
        .get('http://localhost:3000/user/account',{
           withCredentials:true,
        })
        .then((result)=>{
          if(result.data.code==200){
            console.log(result);
            this.imgurl=result.data.profile.avatarUrl
            this.nickname=result.data.profile.nickname
            console.log(this.nickname);
            console.log(this.imgurl);
          }
        })
    },
  },
  components: {},
  created(){
    this.getuserinfo();
    var style = localStorage.getItem("style");
    if(style){
    document.getElementById('style').setAttribute("href",style); //实现将主题保存在内存中刷新浏览器不改变
  }

  }
};
</script>

<style>
.more{
    width: 37px;
  }
  .more p{
    width: 26px;
    height: 2px;
    background-color: black;
    margin: 6px;
  }
   .more{
      height:100%;
      position: fixed;
      top: 0;
      left: 0;
  }
  .more-a{
      width: 300px;
      height:100%;
      margin-left: 5px;
      margin-bottom: 50px;
  }
  .moreone,.moretwo{
      margin-top: 25px;
  }
  .moretwo p{
      color: rgb(116, 115, 115);
      font-size: 14px;
      margin-left: 20px;
  }
  .jbbutton{
      width: 258px;
      margin: 0 auto;
     padding-top: 18px;
  }
  .navtop{
    /* background-color: pink; */
    display: flex;
    justify-content: flex-start;
    padding-left:19px;
    position:sticky;
    top: 0;
    z-index: 9;
    background-color: #fff;

  }
  .navtopm{
    height: 100%;
    margin: 0 auto;
  }
  .navtop-left{
    display: flex;
    align-items: center;
  }
  .van-button{
    border-radius: 10px;
  }
  
    </style>
  